<template>
  <div class="home">
    <header class="header">
      <div class="logo-container">
        <v-icon size="40" color="primary" class="mr-2">mdi-robot</v-icon>
        <h1 class="title">AI 智能助手 🤖</h1>
      </div>
      <p class="subtitle">你的智能对话伙伴，随时为你解答问题 ✨</p>
    </header>

    <main class="main-content">
      <div class="features">
        <v-card class="feature-card brain-card" variant="outlined">
          <v-icon size="32" color="#9C27B0" class="mb-4">mdi-brain</v-icon>
          <h3>智能对话 🧠</h3>
          <p>强大的语言模型支持，理解准确，回答专业</p>
        </v-card>

        <v-card class="feature-card code-card" variant="outlined">
          <v-icon size="32" color="#2196F3" class="mb-4">mdi-code-tags</v-icon>
          <h3>代码高亮 💻</h3>
          <p>支持多种编程语言的代码高亮显示</p>
        </v-card>

        <v-card class="feature-card markdown-card" variant="outlined">
          <v-icon size="32" color="#4CAF50" class="mb-4">mdi-markdown</v-icon>
          <h3>Markdown 支持 📝</h3>
          <p>完整的 Markdown 格式支持，展示更加美观</p>
        </v-card>

        <v-card class="feature-card theme-card" variant="outlined">
          <v-icon size="32" color="#FF9800" class="mb-4">mdi-theme-light-dark</v-icon>
          <h3>深色模式 🌓</h3>
          <p>支持浅色/深色主题切换，呵护你的眼睛</p>
        </v-card>
      </div>

      <div class="start-chat">
        <v-btn
          size="x-large"
          color="primary"
          class="start-btn"
          prepend-icon="mdi-message"
          to="/chat"
        >
          开始对话 🚀
        </v-btn>
        <div class="quick-tips">
          <p class="tip-title">你可以这样问我 💡</p>
          <div class="tips">
            <v-chip
              v-for="(tip, index) in quickTips"
              :key="index"
              class="ma-2 tip-chip"
              variant="outlined"
              :color="chipColors[index % chipColors.length]"
            >
              {{ tip }}
            </v-chip>
          </div>
        </div>
      </div>
    </main>

    <footer class="footer">
      <p>Version 1.0.0 | Powered by DeepSeek 🌟</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
const quickTips = [
  '🎨 帮我写一个简单的Vue组件',
  '🔄 解释一下React和Vue的区别',
  '📊 如何使用TypeScript优化代码',
  '⚡ 帮我优化这段代码的性能',
  '🛠️ 介绍一下前端工程化的最佳实践',
  '📱 如何实现响应式布局'
]

const chipColors = ['#9C27B0', '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#00BCD4']
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--background-light) 0%, #f0f4ff 100%);
}

.header {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.title {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0;
  background: linear-gradient(45deg, #2196F3, #9C27B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 1rem;
}

.main-content {
  flex: 1;
  padding: 0 2rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.feature-card {
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
}

.brain-card {
  background: linear-gradient(135deg, #f3e5f5 0%, #fff 100%) !important;
}

.code-card {
  background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%) !important;
}

.markdown-card {
  background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%) !important;
}

.theme-card {
  background: linear-gradient(135deg, #fff3e0 0%, #fff 100%) !important;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin: 1rem 0;
  color: var(--text-light);
}

.feature-card p {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
}

.start-chat {
  text-align: center;
  margin-top: 2rem;
}

.start-btn {
  margin-bottom: 2rem;
  padding: 0 2rem !important;
  height: 56px !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3) !important;
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
}

.quick-tips {
  max-width: 800px;
  margin: 0 auto;
}

.tip-title {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.tip-chip {
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.tip-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.footer {
  text-align: center;
  padding: 2rem;
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.9rem;
  background: linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

/* 深色模式适配 */
:deep(.v-theme--dark) {
  .home {
    background: linear-gradient(135deg, var(--background-dark) 0%, #1a1a2e 100%);
  }

  .header {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  }

  .title {
    background: linear-gradient(45deg, #64b5f6, #ce93d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .subtitle,
  .feature-card p,
  .footer {
    color: rgba(255, 255, 255, 0.7);
  }

  .feature-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  }

  .feature-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
  }

  .brain-card {
    background: linear-gradient(135deg, rgba(156,39,176,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
  }

  .code-card {
    background: linear-gradient(135deg, rgba(33,150,243,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
  }

  .markdown-card {
    background: linear-gradient(135deg, rgba(76,175,80,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
  }

  .theme-card {
    background: linear-gradient(135deg, rgba(255,152,0,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
  }

  .feature-card h3,
  .tip-title {
    color: var(--text-dark);
  }

  .footer {
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .header {
    padding: 2rem 1rem;
  }

  .title {
    font-size: 2rem;
  }

  .main-content {
    padding: 0 1rem 2rem;
  }

  .features {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
</style> 